<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../../zxt/zxt.js"></script>
		<script>
			importZXT("../../zxt");
		</script>
	</head>

	<body>
		<div id="aTab" zxt="zxt.ui.TabPanel" zxt.configFunc="configTab">
			<div zxt.label="table" zxt.title="控件说明" zxt.closeable="false">
				<table>
					<tr>
						<td>getType()</td>
						<td>返回控件类型</td>
						<td><input type="button" name="getType" value="getType" 
							onclick="alert('标签页控件的type为'+$zxtUI.aTab.getType());"/></td>
					</tr>
					<tr>
						<td>addDOM(label, title, dom, closeable) </td>
						<td>插入传入的DOM元素</td>
						<td><input type="button" name="addDOM" value="addDOM" 
							onclick="var i = new zxt.ui.Label();i.setValue('TAB I');$zxtUI.aTab.addDOM('TAB I', '用户选择', i.render());alert('标签页控件增加了dom节点');"/></td>
					</tr>
					<tr>
						<td>addPage(label, title, location, page, data, closeable)</td>
						<td>添加Tab页方法 TAB页为工程中的一个页面 需与服务器交互</td>
						<td></td>
					</tr>
					<tr>
						<td>addURL(label, url, title, closeable)</td>
						<td>传入URL增加一个TAB页面</td>
						<td><input type="button" name="addURL" value="addURL" 
							onclick="addTab()"/></td>
					</tr>
					<tr>
						<td>changeTitle(label, title) </td>
						<td>TAB的标题名更改方法 </td>
						<td><input type="button" name="changeTitle" value="changeTitle" 
							onclick="$zxtUI.aTab.changeTitle('product','产品公司')"/></td>
					</tr>
					<tr>
						<td>onShowTab(page, old)</td>
						<td>显示TAB页时触发的方法 由showTab方法调用</td>
						<td></td>
					</tr>
					<tr>
						<td>openBehind(v)</td>
						<td>新增TAB页是否隐藏</td>
						<td><input type="button" name="openBehind" value="openBehind" 
							onclick="alert('标签页控件的openBehind为'+$zxtUI.aTab.openBehind());"/></td>
					</tr>
					<tr>
						<td>removeTab(label) </td>
						<td>删除对应的Tab页 </td>
						<td><input type="button" name="removeTab" value="removeTab" 
							onclick="$zxtUI.aTab.removeTab('detail');"/></td>
					</tr>
					<tr>
						<td>removeAllTab()</td>
						<td>删除所有可删除的Tab页 </td>
						<td><input type="button" name="removeAllTab" value="removeAllTab" 
							onclick="removeTab();"/></td>
					</tr>
					<tr>
						<td>showTabByIndex(label)</td>
						<td>根据序号值显示对应的Tab页对象 </td>
						<td><input type="button" name="showTabByIndex" value="showTabByIndex" 
							onclick="$zxtUI.aTab.showTabByIndex(1);"/></td>
					</tr>
					<tr>
						<td>showTabByLabel(label)</td>
						<td>根据标签值显示对应的Tab页对象 </td>
						<td><input type="button" name="showTabByLabel" value="showTabByLabel" 
							onclick="$zxtUI.aTab.showTabByLabel('product');"/></td>
					</tr>
				</table>
			</div>
			<div zxt.label="detail" zxt.title="公司明细" zxt.closeable="true">
				<table>
					<tr>
						<td><iframe id="aframe" src="http://www.baidu.com"></iframe></td>
					</tr>
				</table>
			</div>

			<div zxt.label="product" zxt.title="公司产品" zxt.closeable="false">
				<a>HIJKLMN</a>
			</div>
		</div>
		
		<div>
			<a href="../index.html">返回</a>
		</div>
	</body>
</html>

<script>
	$zxt.init();

	function configTab(tabA) {
	}

	function switchTab() {
		var tabA = $zxtUI.aTab;
		tabA.showTabByIndex(0);
	}

	function addTab() {
		var tabA = $zxtUI.aTab;
		tabA.addURL("TAB M", "我的选择", "http://www.baidu.com");
		tabA.render();
	}

	function removeTab() {
		$zxtUI.aTab.removeAllTab();
	}
</script>
